<template>
  <div class="medicalservice">
    <div class="content">
      <div class="content-item">
        <div class="item-box" v-for="(item, i) in changeList" :key="i">
          <div class="title item">
            {{ i === changeList.length - 1 ? "社区医院" : `就近医院${i + 1}` }}
          </div>
          <div class="item">
            <span>{{
              i === changeList.length - 1 ? "社区医院名称" : "就近医院名称"
            }}</span>
            <span>{{ item.originName }}</span>
          </div>
          <div class="item">
            <span class="field-name">变更医院名称</span>
            <span class="field-value">
              <input
                type="text"
                placeholder="请输入医院名称"
                v-model="item.targetName"
              /></span>
          </div>
          <div class="item">
            <span class="field-name">医院代码</span>
            <span class="field-value">
              <input
                type="text"
                placeholder="请输入医院代码"
                v-model="item.targetCode"
              /></span>
          </div>
        </div>
      </div>
    </div>
    <div class="sign-btn" @click="submit">提交</div>
    <div class="historylist">
      <p class="historytitle">变更记录</p>
      <div class="item" v-for="(item, i) in list" :key="i" @click="history(item.ddyybId)">
        <div>
          <p>变更日期：{{ item.createTime }}</p>
          <p>{{ item.hospital }}</p>
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
  </div>
</template>

<script>

import {ddyybgQuerydata4boject, ddyybgQuerydatabgjl, ddyybgQuerydatabgjlxq, ddyybgQuerydata4list} from '@/assets/js/api';
export default {
  data() {
    return {
      dspToken: localStorage.dspToken,
      changeList: [
        {
          originName: '',
          targetName: '',
          targetCode: ''
        },
        {
          originName: '',
          targetName: '',
          targetCode: ''
        },
        {
          originName: '',
          targetName: '',
          targetCode: ''
        }
      ],
      list: []
    };
  },
  mounted() {
    this.getddyybgQuerydata4list();
    this.ddyybgQuerydataList();
  },
  methods: {
    getddyybgQuerydata4list() {
      ddyybgQuerydata4list({
        dspToken: this.dspToken
      }).then(({data}) => {
        data = data[0];
        this.changeList[0] = {
          originName: data.jjyy1,
          targetName: '',
          targetCode: ''
        };
        this.changeList[1] = {
          originName: data.jjyy2,
          targetName: '',
          targetCode: ''
        };
        this.changeList[2] = {
          originName: data.sqyy,
          targetName: '',
          targetCode: ''
        };
      });
    },
    ddyybgQuerydataList() {
      ddyybgQuerydatabgjl({
        dspToken: this.dspToken
      }).then(({data}) => {
        this.list = data;
      });
    },
    history(ddyybId) {
      ddyybgQuerydatabgjlxq({
        dspToken: this.dspToken,
        ddyybId: ddyybId
      }).then(({data}) => {
        data = data[0];
        this.$router.push({
          name: 'detail',
          query: {
            title: '定点医院变更记录',
            data: JSON.stringify({
              '就近医院1名称': data.bgqjjyy1,
              '变更医院1名称': data.bghjjyy1,
              '变更医院1编码': data.bghyybm1,
              '就近医院2名称': data.bgqjjyy2,
              '变更医院2名称': data.bghjjyy2,
              '变更医院2编码': data.bghyybm2,
              '社区医院名称': data.bgqsqyy,
              '社区医院变更名称': data.bghsqyy,
              '社区医院变更编码': data.bghyybm3
            })
          }
        });
      });
    },
    submit() {
      let data = {};
      this.changeList.map((item, index) => {
        data['bghjjyy' + (index + 1)] = item.targetName;
        data['bghyybm' + (index + 1)] = item.targetCode;
      });
      ddyybgQuerydata4boject({
        dspToken: this.dspToken,
        ...data
      }).then(({data}) => {
        this.ddyybgQuerydataList();
        this.getddyybgQuerydata4list();
        // this.$router.push({
        //   path: '/medicalHeathCare',
        //   query: {}
        // });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.medicalservice {
  background: #f5f5f5;
  padding: 26px;
  .content {
    // box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    // border-radius: 8px;
    .content-item {
      .item-box {
        margin-bottom: 24px;
        box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
        border-radius: 8px;
        background: #ffffff;
        .item {
          &:not(:first-child) {
            display: flex;
            justify-content: space-between;
          }
          padding: 36px 29px;
          border-bottom: 1px solid #eeeeee;
          font-size: 34px;
          color: #333333;
          &:last-child {
            border: none;
          }
          input {
            width: 100%;
            height: 100%;
            text-align: right;
          }
        }
        .title {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          height: 61px;
          line-height: 61px;
          display: flex;
          background-color: #ffffff;
          &::before {
            content: "";
            width: 4px;
            height: 22px;
            background: #3198ed;
            margin-right: 10px;
            margin-left: 0px;
            align-self: center;
          }
        }
      }
    }
  }
  .sign-btn {
    border: none;
    width: 704px;
    height: 90px;
    background-color: #3198ed;
    box-shadow: 0px 5px 5px 0px rgba(89, 166, 250, 0.1);
    border-radius: 45px;
    line-height: 90px;
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    margin: 26px auto;
    letter-spacing: 7px;
  }
  .historylist {
    .historytitle {
      color: #888888;
      font-size: 30px;
      margin: 19px 0;
    }
    .item {
      width: 704px;
      padding: 36px 0;
      background-color: #ffffff;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      margin: 0 auto;
      margin-top: 23px;
      position: relative;
      padding: 31px 30px 26px 33px;
      box-sizing: border-box;
      display: flex;
      &::before {
        content: "";
        width: 5px;
        background-color: #3198ed;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      > div:first-child {
        flex: 1;
        p:first-child {
          color: #888888;
          font-size: 30px;
        }
        p:last-child {
          width: calc(100vw - 160px);
          color: #353535;
          font-size: 34px;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
      }
      > div:last-child {
        width: 50px;
        font-size: 34px;
        color: #b2b2b2;
        align-self: center;
        text-align: right;
      }
    }
  }
}
</style>
